<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 30px;
				height: 30px;
				border: 0.0020rem solid #95F5B4;
				display: inline-block;
				box-sizing: border-box;
				margin: -2px 0;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			var boxready ="";
			var w = 30;
			for (var i = 0; i < 2016; i++) {
				boxready += "<div class=\"box"+i+" style=\"width:"+w+"px;height:"+w+"px\"></div>"
			}
			$("body").html(boxready);
			
			$("body").on("click",function(){
				var j = 0;
				var b = setInterval(function(){
					var a = j+1;
					$(".box"+j).fadeIn(2200);
					$(".box"+a).fadeOut(100);
					j++;
					if(j == 2016){
						clearInterval(b);
						j=0;
					}
				},100);
			});
		});
			
		</script>
	</body>
</html>
